<template>
    <div id="searchResult">
        <div v-for="user in users" :key="user.id">
            <van-card
            style="text-align: left;"
            :desc="user.profile"
            :title="user.nickName"
            >
            <template #thumb>
                <van-image
                    width="60px"
                    height="60px"
                    fit="cover"
                    position="left"
                    :src="defaultUserImage"
                />
            </template>
            <template #tags>
                <van-tag style="margin-right: 8px;" round type="primary" v-for="tag in user.tags" :key="tag">{{ tag }}</van-tag>
            </template>
            <template #footer>
                <van-button size="mini" @click="contactMe(user)">联系我</van-button>
            </template>
            </van-card>
        </div>
        <van-empty v-if="users.length === 0" image="search" description="暂无信息" />
    </div>
</template>

<style scoped>
</style>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import Myaxios from "../plugins/MyAxios"
import { showConfirmDialog } from 'vant';
import defaultUserImage from "../tempImageFiles/defaultUser.png";

const route = useRoute();
const tagsList = route.query.tags;
const users = ref([])

onMounted(() => {
    console.log("tagsList: " + tagsList)
    Myaxios.post('searchByTags', {
        tags: tagsList
    })
    .then(function (response) {
        console.log(response.data.data);
        users.value = response.data.data;

    })
    .catch(function (error) {
        console.log(error);
    });
})


const contactMe = (user) =>{
    showConfirmDialog({
        title: '联系我',
        message: user.userEmail,
    })
}



</script>